<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  
  
  <title>  Commitizen、cz-Customizable、eslint、prettier、husky、commitlint搭建前端git提交规范 |   写夜子的个人博客 </title>

 
  
    <link rel="icon" href="/images/favicon.png">
  


  <link rel="stylesheet" href="/nayo.min.css"> 
</head>  
  <body>   
    
      <header class="header">
	
  <nav class="header-nav">        
   
    <span class="iconfont icon-menu mobile-toggle"></span>   	

    <div class="header-menu">          
              
            
              <a class="header-menu-link" id="header-menu-home" href="/">首页</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-archives" href="/archives">归档</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-tags" href="/tags">标签</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-about" href="/about">关于</a>     
            
            
            
              <a class="iconfont icon-menu-search header-menu-link" id="header-menu-search"></a>
            
                
    </div>  
    
  </nav>
</header>   

      <div class="container">       
          
          
            <section class="main">  
          

          <article class="post">
  
	<div class="post-header">

	<p class="post-title">	
		commitizen、cz-customizable、eslint、prettier、husky、commitlint搭建前端git提交规范
	</p>
			

	<div class="meta-info">	
	<span>
		12月 03, 2019
	</span>

	
	
		<i class="iconfont icon-words"></i>
		<span>
			5863
		</span>
	
</div>

</div> 
	 

	  <div class="post-content slideDownMin">

		

			
					<p> 平时自己写代码的时候，每当需要提交代码到GitHub的时候，我一般的操作是直接<code>git commit &#39;xxxx&#39;</code>，然后直接就推送了，后来项目变得稍微有点大了，还有一些其他小伙伴加入了项目的开发，他们给我项目仓库提交代码，长时间之后去看他们的提交，甚至都不知道他们干了啥，这就很尴尬了。所以git的提交必须要规范才行，尤其是在多人协作的项目中，如果Git的提交说明精准，在后期协作以及后期review会变得有据可查，项目的开发可以根据规范的提交说明快速生成开发日志，从而方便开发者或用户追踪项目的开发信息和功能特性。  <a id="more"></a></p>
<h3 id="commit-message"><a href="#commit-message" class="headerlink" title="commit message"></a>commit message</h3><p>  我们每一次提交必定是有特殊的行为，或是开发新功能、或是修复bug等等。我们针对不同的操作有如下的分类：</p>
<ul>
<li>type: commit 的类型</li>
<li>feat: 开发新的功能</li>
<li>fix: 修复bug</li>
<li>refactor: 代码重构</li>
<li>docs: 文档修改</li>
<li>style: 代码格式修改, 注意不是 css 修改</li>
<li>test: 测试用例修改</li>
<li>perf: 改善性能</li>
<li>build: 变更项目构建或外部依赖（例如scopes: webpack、gulp、npm等） </li>
<li>chore: 其他修改, 比如构建流程, 依赖管理.</li>
<li><p>revert: 代码回退</p>
<p>而commit的格式也有标准格式:</p>
<ul>
<li>scope: commit 影响的范围, 比如: route, component, utils, build…</li>
<li>subject: commit 的概述</li>
<li>body: commit 具体修改内容</li>
<li>footer: 一些备注, 通常是 BREAKING CHANGE 或修复的 bug 的链接.</li>
</ul>
</li>
</ul>
<h2 id="AngularJS-提交规范"><a href="#AngularJS-提交规范" class="headerlink" title="AngularJS 提交规范"></a>AngularJS 提交规范</h2><p> Angular的提交规范是目前业界内认可度和普及度最高的，我们采用<code>commitizen</code>和<code>cz-customizable</code>来实现规范提交。这两个工具可以根据你的选择自动生成提交信息，然后愉快的提交。<br> 安装<code>commitizen</code>和<code>cz-customizable</code>:<br> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -D commitizen</span><br><span class="line">npm install -D cz-customizable</span><br></pre></td></tr></table></figure></p>
<p> 在<code>package.json</code>中配置config.commitizen字段，配置cz工具的适配器路径:<br> <figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> "config": &#123;</span><br><span class="line">  "commitizen": &#123;</span><br><span class="line">    "path": "node_modules/cz-customizable"</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p> 在项目根目录新建<code>.cz-config.js</code>:<br> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">'use strict'</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">types: [</span><br><span class="line">    &#123;</span><br><span class="line">    value: <span class="string">'feat✨'</span></span><br><span class="line">    name: <span class="string">'✨  feat:     A new feature'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    value: <span class="string">'fix🐞'</span>,</span><br><span class="line">    name: <span class="string">'🐞  fix:      A bug fix'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    value: <span class="string">'refactor🛠'</span>,</span><br><span class="line">    name:</span><br><span class="line">        <span class="string">'🛠  refactor: A code change that neither fixes a bug nor adds a feature'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    value: <span class="string">'docs📚'</span>,</span><br><span class="line">    name: <span class="string">'📚  docs:     Documentation only changes'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    value: <span class="string">'test🏁'</span>,</span><br><span class="line">    name: <span class="string">'🏁  test:     Add missing tests or correcting existing tests'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    value: <span class="string">'chore🗯'</span>,</span><br><span class="line">    name:</span><br><span class="line">        <span class="string">"🗯  chore:    Changes that don't modify src or test files. Such as updating build tasks, package manager"</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    value: <span class="string">'style💅'</span>,</span><br><span class="line">    name:</span><br><span class="line">        <span class="string">'💅  style:    Code Style, Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">    value: <span class="string">'revert⏪'</span>,</span><br><span class="line">    name: <span class="string">'⏪  revert:   Revert to a commit'</span></span><br><span class="line">    &#125;</span><br><span class="line">],</span><br><span class="line"></span><br><span class="line">scopes: [],</span><br><span class="line"></span><br><span class="line">allowCustomScopes: <span class="literal">true</span>,</span><br><span class="line">allowBreakingChanges: [<span class="string">'feat'</span>, <span class="string">'fix'</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p> 对应的中文版本：<br> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"> </span><br><span class="line">  </span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  types: [</span><br><span class="line">    &#123; <span class="attr">value</span>: <span class="string">'feat✨'</span>, <span class="attr">name</span>: <span class="string">'特性: 一个新的特性'</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">value</span>: <span class="string">'fix🐞'</span>, <span class="attr">name</span>: <span class="string">'修复: 修复一个Bug'</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">value</span>: <span class="string">'docs📚'</span>, <span class="attr">name</span>: <span class="string">'文档: 变更的只有文档'</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">value</span>: <span class="string">'style💅'</span>, <span class="attr">name</span>: <span class="string">'格式: 空格, 分号等格式修复'</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">value</span>: <span class="string">'refactor🛠'</span>, <span class="attr">name</span>: <span class="string">'重构: 代码重构，注意和特性、修复区分开'</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">value</span>: <span class="string">'perf🐎'</span>, <span class="attr">name</span>: <span class="string">'性能: 提升性能'</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">value</span>: <span class="string">'test🏁'</span>, <span class="attr">name</span>: <span class="string">'测试: 添加一个测试'</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">value</span>: <span class="string">'revert⏪'</span>, <span class="attr">name</span>: <span class="string">'回滚: 代码回退'</span> &#125;,</span><br><span class="line">    &#123; <span class="attr">value</span>: <span class="string">'chore🗯'</span>, <span class="attr">name</span>: <span class="string">'工具:开发工具变动(构建、脚手架工具等)'</span> &#125;</span><br><span class="line">  ],</span><br><span class="line">  messages: &#123;</span><br><span class="line">    type: <span class="string">'选择一种你的提交类型:'</span>,</span><br><span class="line">    customScope: <span class="string">'请输入修改范围(可选):'</span>,</span><br><span class="line">    subject: <span class="string">'短说明:'</span>,</span><br><span class="line">    body: <span class="string">'长说明，使用"|"换行(可选)：'</span>,</span><br><span class="line">    footer: <span class="string">'关联关闭的issue，例如：#31, #34(可选):'</span>,</span><br><span class="line">    confirmCommit: <span class="string">'确定提交说明?'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  allowCustomScopes: <span class="literal">true</span>,</span><br><span class="line">  allowBreakingChanges: [<span class="string">'特性'</span>, <span class="string">'修复'</span>],</span><br><span class="line">  subjectLimit: <span class="number">100</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p> 接下来我们就可以使用 <code>git cz</code>来进行提交。我们再优化一下，我们在<code>script</code>配置一下脚本命令:<br> <figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">"scripts": &#123;</span><br><span class="line"> "commit": "git-cz"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p> 至此我们已经可以愉快的使用<code>npm run commit</code>进行提交。</p>
<h2 id="继续优化"><a href="#继续优化" class="headerlink" title="继续优化"></a>继续优化</h2><p> 假设现在有两个程序猿，程序猿甲某一天开发了一个新的功能，然后愉快利用如上的步骤提交了，过了几天，程序猿乙在他的基础上修改了代码，然后又进行了提交，又过了几天，程序猿乙因为跟产品经理吵了一架，愤然离去。接着这个功能模块只能由程序猿甲来进行迭代维护。于是在一个美丽的周一早晨，程序猿甲打开vscode，拉取了项目代码，本想愉快的进行开发，但是他发现他原来的代码，被改得面目全非:“我这里原来没有分号啊…”、“这里原来都是双引号啊…”。他陷入了对人生的思考。通过上面的简短故事，我们了解到在进行团队协作开发的时候，由于每个人的代码都不相同，一千个哈姆雷特就出来了，代码变得越来越难以维护。所以我们需要一些“规则”来约束团队成员，达到一致的风格。<br> 下面就是一套“降龙十八掌”:   </p>
<h2 id="eslint"><a href="#eslint" class="headerlink" title="eslint"></a>eslint</h2><p> 第一式: <code>eslint</code> : <code>npm install -D eslint</code><br> <code>eslint</code> : 提供编码规范，提供自动检验代码的程序，并打印检验结果：告诉你哪一个文件哪一行代码不符合哪一条编码规范，方便你去修改代码，可以通过配置文件来加以配置。比如:<br> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">  <span class="comment">//.eslintrc.js</span></span><br><span class="line">   &#123;</span><br><span class="line">   <span class="string">"extends"</span>: [<span class="string">"airbnb"</span>, <span class="string">"plugin:prettier/recommended"</span>], <span class="comment">// eslint扩展规则</span></span><br><span class="line">   <span class="string">"parserOptions"</span>: &#123;</span><br><span class="line">       <span class="string">"ecmaVersion"</span>: <span class="number">7</span>,</span><br><span class="line">       <span class="string">"sourceType"</span>: <span class="string">"module"</span>,</span><br><span class="line">       <span class="string">"ecmaFeatures"</span>: &#123;</span><br><span class="line">       <span class="string">"jsx"</span>: <span class="literal">true</span></span><br><span class="line">       &#125;</span><br><span class="line">   &#125;,</span><br><span class="line">   <span class="string">"parser"</span>: <span class="string">"babel-eslint"</span>,<span class="comment">// 解决ES6 improt会报错</span></span><br><span class="line">   <span class="string">"env"</span>: &#123; <span class="comment">// eg如果不配置browser，window就会被eslint报undefined的错</span></span><br><span class="line">       <span class="string">"es6"</span>: <span class="literal">true</span>,</span><br><span class="line">       <span class="string">"browser"</span>: <span class="literal">true</span>,</span><br><span class="line">       <span class="string">"node"</span>: <span class="literal">true</span></span><br><span class="line">   &#125;,</span><br><span class="line">   <span class="string">"plugins"</span>: [<span class="string">"react"</span>, <span class="string">"jsx-a11y"</span>, <span class="string">"import"</span>],</span><br><span class="line">   <span class="string">"rules"</span>: &#123;</span><br><span class="line">       <span class="string">"class-methods-use-this"</span>: <span class="number">0</span>,</span><br><span class="line">       <span class="string">"import/no-named-as-default"</span>: <span class="number">0</span>,</span><br><span class="line">       <span class="string">"react/jsx-filename-extension"</span>: [</span><br><span class="line">       <span class="string">"error"</span>,</span><br><span class="line">       &#123;</span><br><span class="line">           <span class="string">"extensions"</span>: [<span class="string">".js"</span>, <span class="string">".jsx"</span>]</span><br><span class="line">       &#125;</span><br><span class="line">       ]</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p> 在eslint 里面，你可以约束文件的行数、单行代码的长度，甚至是函数的复杂度等等。 </p>
<h2 id="prettier"><a href="#prettier" class="headerlink" title="prettier"></a>prettier</h2><p> 第二式:<code>prettier</code> : <code>npm install -D prettier</code><br> <code>prettier</code> : 代码格式化。<br> 利用<code>prettier</code>可以进行统一的代码格式化。从此再也没有要不要分号的纷争了。例如:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//.prettierrc</span></span><br><span class="line">    &#123; </span><br><span class="line">    <span class="string">"printWidth"</span>: <span class="number">120</span>, <span class="comment">// 一行最大多少字符</span></span><br><span class="line">    <span class="string">"tabWidth"</span>: <span class="number">2</span>, <span class="comment">// tab占用的字符数</span></span><br><span class="line">    <span class="string">"useTabs"</span>: <span class="literal">false</span>, <span class="comment">// 是否使用tab代替空格</span></span><br><span class="line">    <span class="string">"semi"</span>: <span class="literal">true</span>, <span class="comment">// 是否每句后都加分号</span></span><br><span class="line">    <span class="string">"singleQuote"</span>: <span class="literal">true</span>, <span class="comment">// 是否使用单引号</span></span><br><span class="line">    <span class="string">"jsxSingleQuote"</span>: <span class="literal">false</span>, <span class="comment">// jsx是否使用单引号</span></span><br><span class="line">    <span class="string">"trailingComma"</span>: <span class="string">"all"</span>, <span class="comment">// 数组尾逗号。</span></span><br><span class="line">    <span class="string">"bracketSpacing"</span>: <span class="literal">false</span>, <span class="comment">// &#123;foo: xx&#125;还是&#123; foo: xx &#125;</span></span><br><span class="line">    <span class="string">"arrowParens"</span>: <span class="string">"always"</span> <span class="comment">//箭头头函数参数是否使用（）      </span></span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure></p>
<p>那有了如上两个掌法，我们已经可以很好的实现代码格式统一，但是又衍生了一个新的问题:<br> 开发的时候，什么时候进行代码的规则校验和格式化统一呢？相信很多小伙伴想到了解决方法:在进行<code>commit</code>的时候进行校验和格式化。 </p>
<p> 此时就用到了第三式:<code>husky</code><br> <code>husky</code> : <a href="https://github.com/typicode/husky" target="_blank" rel="noopener">husky</a>是一个npm包，安装后，可以很方便的在package.json配置git hook 脚本。<br> 我们在这里要用到一个主要的钩子:<code>pre-commit</code>,这个钩子会在你<code>commit</code>的时候执行你想要的操作。例如:</p>
 <figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">"husky": &#123;</span><br><span class="line"> "hooks": &#123;</span><br><span class="line">   "pre-commit": "npm run lint"</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<p> 以上代码，当你在后续的每一次<code>git commit</code> 之前，都会执行一次对应的 hook 脚本npm run lint 。<br> 所以这个时候，我们把<code>eslint</code>和<code>prettier</code>的操作都放在<code>pre-commit</code>钩子里面就可以了:<br> <figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"> "husky": &#123;</span><br><span class="line">  "hooks": &#123;</span><br><span class="line">    "pre-commit": "lint-staged"</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br><span class="line">"lint-staged": &#123;</span><br><span class="line">  "*.&#123;json,css,md&#125;": [</span><br><span class="line">    "npm run format",</span><br><span class="line">    <span class="string">"git add"</span></span><br><span class="line">  ],</span><br><span class="line">  "*.scss": [</span><br><span class="line">    "npm run lint:scss",</span><br><span class="line">    "npm run format",</span><br><span class="line">    <span class="string">"git add"</span></span><br><span class="line">  ],</span><br><span class="line">  "*.&#123;js,vue,ts,tsx&#125;": [</span><br><span class="line">    "npm run lint",</span><br><span class="line">    "npm run format",</span><br><span class="line">    <span class="string">"git add"</span></span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p> 如上，在每一次提交之前，我们都进行了 <code>eslint</code> 的代码规则校验和 <code>prettier</code> 的代码格式化。<br> 但是现在有一个问题还没解决，待我细细道来。现在我们再到我们项目的根目录下，我们再次利用<code>git add .</code> 和 <code>git commit -m xxx</code> 来提交，结果发现提交仍然通过了，那我们现在既可以用<code>npm run commit</code>来提交，也可以用原来的命令来提交，那我们原来搞的这一套不就是白费了吗？我的意思是我们应该对<code>commit</code>进行校验，如果校验不能通过，那我们就不允许他<code>commit</code>。那我们继续往下操作吧。</p>
<h2 id="commitlint-和-commitlint-config-cz"><a href="#commitlint-和-commitlint-config-cz" class="headerlink" title="commitlint 和 commitlint-config-cz"></a>commitlint 和 commitlint-config-cz</h2><p>  安装<code>commitlint</code>和<code>commitlint-config-cz</code>:<br>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -D @commitlint/cli</span><br><span class="line">npm install -D commitlint-config-cz</span><br></pre></td></tr></table></figure></p>
<p>  在项目的根目录下新建 <code>commitlint.config.js</code>:<br>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> <span class="built_in">module</span>.exports = &#123;</span><br><span class="line">   extends: [</span><br><span class="line">       <span class="string">'cz'</span></span><br><span class="line">   ],</span><br><span class="line">   rules: &#123;</span><br><span class="line">       <span class="string">'type-empty'</span>: [<span class="number">2</span>, <span class="string">'never'</span>], <span class="comment">//不允许提交的类型为空</span></span><br><span class="line">       <span class="string">'subject-empty'</span>: [<span class="number">2</span>, <span class="string">'never'</span>] <span class="comment">//不允许 提交的内容为空</span></span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
 <figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">"husky": &#123;</span><br><span class="line">   "hooks": &#123;</span><br><span class="line">     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", // 在husky的配置里面加入这一句，意思为了在提交前进行校验</span><br><span class="line">     "pre-commit": "lint-staged"</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<p> 然后你再去用原来的<code>git comiit -m xxx</code>就会发现提交不通过了，我们达到了校验的目的。至此我们就完成前端提交代码的规范啦～</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>我们先来看看提交的流程图:</p>
<p><img src="https://i.loli.net/2019/12/08/BRVKn1HuXw6mF9t.png" alt="未命名文件.png"></p>
<p>通过<code>commitizen</code>、<code>cz-customizable</code>、<code>eslint</code>、<code>prettier</code>、<code>husky</code>、<code>commitlint</code>我们完整的约束了提交的流程，保证了代码的统一，提高了代码的健壮性和可维护性。为后期的工作节省了很多时间，又可以省出很多时间去勾搭小姐姐了😏</p>
  	
					
	  </div>     
	  

	
<div class="post-meta">
      	

      
        <i class="iconfont icon-tag"></i>     
          <a class="tag-link" href="/tags/Git/">Git</a>    
      	
</div>





<div class="post-footer">
  <div class="pf-left">
      <img class="pf-avatar" src="http://wx2.sinaimg.cn/mw690/89296167gy1fu5ph67x17j21kw1kwhdu.jpg">
      <p class="pf-des">hi,我是写夜子,希望你有愉快的一天.</p>
  </div>

  <div class="pf-right">           
      <div class="pf-links">
        




<span class="donate-btn">
	<span class="iconfont icon-donate"></span>
</span>


<div id="donate-box" class="sildeUpMin">

	<span class="donate-cancel iconfont icon-cancel"></span>

	<div class="donate-img-box">
		<img id="donate-qr-wechat" class="noLazyLoad donate-img" src="/images/donate1.png" alt="No Donate Image!">	
		<img id="donate-qr-alipay" class="noLazyLoad donate-img" src="/images/donate2.png" alt="No Donate Image!">	
	</div>

	<span class="donate-word">世界美好 你也是</span>

	<div class="donate-list">
		<span class="iconfont icon-donate-wechat"></span>
		<span class="iconfont icon-donate-alipay"></span>
	</div>

</div>

 
        
	
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=21d601593a1de"></script>
	
	<span class="share-btn">
	<span class="iconfont icon-share"></span>
	</span>


	<div class="-mob-share sildeUpMin">
		   			             
            <a class="iconfont  icon-share-qq -mob-share-qq"></a>		
     	   			             
            <a class="iconfont  icon-share-weixin -mob-share-weixin"></a>		
     	   			             
            <a class="iconfont  icon-share-weibo -mob-share-weibo"></a>		
     	   			             
            <a class="iconfont  icon-share-douban -mob-share-douban"></a>		
     	   			             
            <a class="iconfont  icon-share-facebook -mob-share-facebook"></a>		
     	   			             
            <a class="iconfont  icon-share-twitter -mob-share-twitter"></a>		
     	   			             
            <a class="iconfont  icon-share-google -mob-share-google"></a>		
     	   
	</div>	

      </div>  
    <nav class="pf-paginator">
      
         
          <a href="/2020/01/05/2019一路走来/" data-hover="2019一路走来">上一篇</a>      
            
        
      
        
        <a href="/2019/11/29/React基础入门/" data-hover="React基础入门"> 下一篇</a>
            
  </nav>   
  </div>
</div> 
	
	
</article>

          </section> 
      </div>            
    
    <a id="backTop">
      <span>
        <i class="iconfont icon-backtotop"></i>
      </span>
    </a> 

  
    
    <div class="search-container sildeUpMin">
        <div class="search-header">
            <input type="text" placeholder="输入你想搜索的" id="search-input" class="search-input">  
            <span class="search-cancel iconfont icon-cancel"></span>
        </div>
        <div id="search-result" class="search-result"></div>
    </div>
 
     <div class="mobile-menu">      

      
      <img class="mobile-menu-icon" src="/images/favicon.png">   
      

         
            

            <a class="mobile-menu-link" href="/">首页
            </a>
            
         
            

            <a class="mobile-menu-link" href="/archives">归档
            </a>
            
         
            

            <a class="mobile-menu-link" href="/tags">标签
            </a>
            
         
            

            <a class="mobile-menu-link" href="/about">关于
            </a>
            
         
                          

            <a class="mobile-menu-link mobile-menu-search" href="#">搜索 </a>                 
            
         
      
</div>        
    


<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?636802045446222199ae541e32c8133e"; 
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>





     
    




<footer id="footer">


		<div class="footer-copyright">
		&copy;
		
		2018-
		
		2020

		Xieyezi
		<br>

		Copyright
		<a href="https://github.com/xieyezi" target="_blank">Xieyezi</a>
		</div>

</footer>
   

  

    <script src="/nayo.bundle.js"></script>           
  </body>        
</html>